IE CSS Hack

IE 조건부 주석#

조건부 주석이란 IE를 제외한 브라우져에서는 주석으로 처리하지만 IE에서는 버전에 따라 실제 코드로 인식하는 주석을 말한다.

이를 이용해 각각의 IE 버전에 따라 최적화된 코드를 적용할 수 있다.

 

예를 들어 IE 6 인 경우에만 적용하고픈 css 가 있다면 아래 처럼 IE 6 를 위한 css 를 따로 지정해 줄 수 있다.

    <!--[if IE 6]>
         <link href="css/ie6.css" type="text/css" rel="stylesheet" />
     <![endif]-->

 

형식

<!--[if expression ]> HTML <![endif]-->

IE가 아닌 브라우져에서는 모두 주석으로 처리하지만 IE는 조건부 주석으로 인식하고 expression 에 따라 HTML 을 인식한다.

 

if 문에 사용 가능한 조건 목록

• [if IE 6] : IE 6 인 경우
• [if !IE 6] : IE 6 가 아닌 경우
• gt : "greater than" 높은. 예) [if gt IE 6] : IE 6 보다 높은 경우
• gte : "gteater than or equal to", 같거나 높은.
• lte : "less than or equal to", 같거나 낮은.
• lt : "less than" 낮은.

Attribute Hack#

먼저 표준 호환 브라우저에 서 일반적인 속성으로 맞춘 후 IE7, IE8을 보면서 차이가 나는 부분에는 속성에 #을 붙이면 표준호환 브라우저에서는 무시되지만 IE에는 반영된다. 그리고 마지막으로 IE6를 보면서 안 맞는 부분에 속성에 _를 붙여서 추가하면 IE6에만 적용되고 나머지에는 적용되지 않는다. IE6의 width 버그 등을 수정하기에 가장 좋은 방법

1. width: 300px; /* 표준 호환 브라우저 */
2. #width: 300px; /* IE 전용 */
3. _width: 302px; /* IE6 */
4. *width: 302px; /* IE5~7 */